<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-07-25 10:20:53
 * @LastEditors: 'zhangkeqq' '2211709169@qq.com'
 * @LastEditTime: 2025-08-04 15:40:44
 * @FilePath: \vue3-admin\src\views\menu\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <div class="aside-wrapper">
                    <div class="title">通用后台管理系统</div>
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        :default-active="activeMenu" :router="router" text-color="#fff">
                        <template v-for="(item,index) in menuList">
                            <!-- 只有一级路由 -->
                            <template v-if="item.name == 'menu'">
                                <template v-for="(citem,i) in item.children">
                                    <el-menu-item :index="citem.path">
                                        <el-icon>
                                            <component :is="citem.icon"></component>
                                        </el-icon>
                                        <span>{{ citem.meta.title }}</span>
                                    </el-menu-item>
                                </template>
                            </template>
                            <!-- 有子路由 -->
                            <template v-if="item.name != 'menu' && item.children ">
                                <el-sub-menu :index="item.meta.title">
                                    <template #title>
                                        <el-icon>
                                            <component :is="item.icon"></component>
                                        </el-icon>
                                        <span>{{ item.meta.title }}</span>
                                    </template>
                                    <template v-for="(aitem,a) in item.children">
                                         <el-menu-item :index="aitem.path">{{ aitem.meta.title }}</el-menu-item>
                                    </template>
                                </el-sub-menu>
                            </template>
                        </template>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="header-wrapper">
                        <div class="left">欢迎xxx您的登录</div>
                        <div class="right">
                            <!-- msgStore.read_list.length> 0 ? true : false -->
                            <el-badge :is-dot='true' class="item" @click="openDepartmentMessage">
                                <el-icon :size="20" class="message">
                                    <Message />
                                </el-icon>
                            </el-badge>
                            <el-avatar :size="24" :src="userStore.imageUrl" />
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    设置
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>设置账号</el-dropdown-item>
                                        <el-dropdown-item>更改头像</el-dropdown-item>
                                        <el-dropdown-item @click="goLogin">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <brandCrumb></brandCrumb>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <!--  原为departmentmsg修改为department_msg-->
    <departmentMsg ref="departmentRef"></departmentMsg>
</template>

<script setup lang="ts">
import {ref,computed,toRaw} from 'vue'
import {useRoute ,useRouter} from 'vue-router'
import {useUserInfo} from '@/store/modules/userinfo'
import {useMsg} from '@/store/modules/message'
import brandCrumb from '@/components/brandCrumb.vue'
import departmentMsg from '@/components/department_message.vue'
const $route = useRoute()
const userStore = useUserInfo()
const msgStore = useMsg()
const router = useRouter()
const goLogin = () => {
	router.push('/login')
    localStorage.clear()
}
const menuList:any = ref([])
const menuInfo:any = JSON.parse(localStorage.getItem('menuInfo') as any)
menuList.value = toRaw(menuInfo.menuList)
console.log('menulist',menuList.value)
// 部门消息弹框
const departmentRef = ref()
const openDepartmentMessage = () => {
    console.log(msgStore.read_list)
    departmentRef.value.open()
}


const activeMenu = computed(() => {
  const { meta, path } = $route; 
  console.log('path',path,'meta',meta)
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})
</script>

<style lang="scss" scoped>
.el-menu {
    border-right: 0px !important;
}

.aside-wrapper {
    height: 100vh;

    .title {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #545c64;
        color: #fff;
    }

    .el-menu-vertical-demo {
        height: calc(100vh - 50px);
    }
}

.header-wrapper {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {}

    .right {
        width: 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    }
}
.el-header{
    height: 50px;
}
.el-main{
    padding: 0;
    background: #f3f4fa;
}
// :deep(.el-main){
//     padding: 0 !important;
// }

</style>
